<script setup lang="ts">
import { User, PageIn } from '$/client'
import { destroyDialog, middlewares } from '$/client-core'
import { IsAdmin } from '$/permissions'
import ComCtl from '@/components/ComCtl.vue'
import UserForm from '@/components/form-admin/UserForm.vue'
import NPagination from '@/components/packaging/NPagination.vue'
import RecordInfo from '@/components/RecordInfo.vue'
import { Users } from '@/scripts/client-admin'
import { Pen as IPen, Plus as IPlus, TrashCan as ITrashCan, Copy as ICopy } from '@vexip-ui/icons'
import { useRequest } from 'alova/client'
import copy from 'copy-to-clipboard'
import { Button, Message, Modal, Table, TableColumn } from 'vexip-ui'
import { ref } from 'vue'

const params = ref(PageIn.inst())
const mo = ref(User.inst())
const showCreate = ref(false)
const showUpdate = ref(false)

const {
  loading: refreshing,
  data,
  send: refresh
} = useRequest(() => Users.list(params.value), {
  initialData: []
}).onSuccess(() => {
  showCreate.value = false
  showUpdate.value = false
  mo.value.reset()
})
const { loading: creating, send: create } = useRequest(() => Users.create(mo.value), {
  immediate: false
}).onSuccess(refresh)
const { loading: updating, send: update } = useRequest(() => Users.update(mo.value), {
  immediate: false
}).onSuccess(refresh)
const { loading: destroying, send: destroy } = useRequest(() => Users.destroy(mo.value.id), {
  immediate: false,
  middleware: middlewares(destroyDialog)
}).onSuccess(refresh)
</script>

<template>
  <ComCtl content-class="flex flex-col gap-4" :loading="[refreshing, destroying]">
    <div class="flex gap-2 overflow-auto">
      <Button type="primary" @click="showCreate = true" :icon="IPlus" />
      <NPagination v-model="params" :total="data.total" />
    </div>
    <Table :data="data.content">
      <TableColumn id-key="other" type="expand">
        <template #default="{ row }: { row: User }">
          <RecordInfo :info="row" />
        </template>
      </TableColumn>
      <TableColumn v-if="IsAdmin()" name="操作" id-key="action" :width="70">
        <template #default="{ row }: { row: User }">
          <Button
            size="small"
            type="error"
            @click="
              () => {
                mo = row.clone()
                destroy()
              }
            "
            :icon="ITrashCan"
            text
          />
          <Button
            size="small"
            type="primary"
            @click="
              () => {
                mo = row.clone()
                showUpdate = true
              }
            "
            :icon="IPen"
            text
          />
        </template>
      </TableColumn>
      <TableColumn name="名称" id-key="name" :width="250">
        <template #default="{ row }: { row: User }">
          {{ row.name }}
        </template>
      </TableColumn>
      <TableColumn name="用户名" id-key="username" />
      <TableColumn name="密码" id-key="password">
        <template #default="{ row }: { row: User }">
          <div>{{ row.password }}</div>
          <Button size="small" @click="copy(row.password), Message.success('复制成功')" :icon="ICopy" text />
        </template>
      </TableColumn>
      <TableColumn name="总充值" id-key="amount" sorter />
      <TableColumn name="余额" id-key="balance" sorter />
    </Table>
    <template #modals>
      <Modal title="创建" v-model:active="showCreate">
        <UserForm v-model="mo" :loading="creating" :submit="create" />
      </Modal>
      <Modal title="修改" v-model:active="showUpdate">
        <UserForm v-model="mo" :loading="updating" :submit="update" />
      </Modal>
    </template>
  </ComCtl>
</template>
